<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>拼字</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/game.css" />
	<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div class="content">
		<div class="game-start">
			<div class="game-title success-title">第一题</div>
			<div class='count-down'>倒计时&nbsp;&nbsp;
				<span class='count-time'></span>&nbsp;&nbsp;S</div>
		</div>
		<div class="game-over">
			<div class="game-title game-color-red">挑战失败</div>
			<div class="count-down">答到第&nbsp;
			<span class="game-span">X</span>&nbsp;题只差一点点啊</div>
		</div>
		<!-- <div class="game-content four-cotent">
				<div class='four'>
					某
				</div>
				<div class='four'>
					?
				</div>
				<div class='four'>
					某
				</div>
				<div class='four'>
					某
				</div>
			</div> -->
		<!-- <div class="game-content two-cotent">
					<div class='two'>
						某
					</div>
					<div class='two'>
						?
					</div>
				</div> -->
		<!-- <div class="game-content three-cotent">
			<div class='three'>
				某
			</div>
			<div class='three'>
				?
			</div>
			<div class='three'>
				某
			</div>
		</div> -->
		<div class="game-content">
		</div>
		<div class="game-options">
			<!-- <div>
				没
				<div class="game-true"></div>
			</div>
			<div>
				美
				<div class="game-false"></div>
			</div> -->
		</div>
		<div class="game-res">
			<div class="res-title">今天已有&nbsp;
				<span>10</span>&nbsp;位挑战者挑战成功</div>
			<div class="share">邀请好友</div>
			<div class="continue">继续挑战</div>
		</div>
	</div>
	<div class="pop">
		<div class="pop-t"></div>
		<div class="pop-c">
			<img src="./image/share.png" alt="">
		</div>
	</div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jweixin-1.0.0.js"></script>
<script src="js/mui.min.js"></script>
<script src="libs/base.js"></script>
<script type="text/javascript">
	isUserInfo(function () {

		var gameNum = 0;
		var ListChildActive = [];
		var gameTime = initTime = 0;
		var count;
		var countNum;
		var activeId;

		// 创建游戏文字dom
		function createGameDom(arr, className) {
			var dom = '';
			for (var item in arr) {
				dom += '<div class="' + className + '">' + arr[item] + '</div>'
			}
			$('.game-content').html(dom);
		}
		// 渲染游戏文字dom
		function renderGameDom(gameJson) {
			var gameFontArr = gameJson.lackwords.replace(/\(\)/g, '?').split('');
			var gameFontLength = gameJson.rightwords.length;
			var classArr = ['two', 'three', 'four'];
			$('.game-content').attr('class', 'game-content ' + classArr[gameFontLength - 2] + '-cotent');
			createGameDom(gameFontArr, classArr[gameFontLength - 2])
		}
		// 渲染选项文字dom
		function renderOpionDom(gameJson) {
			var num = Math.floor(Math.random() * 2);
			var dom = '';
			if (num) {
				dom = '<div data-istrue="0" class="option">' + gameJson.rightword + '</div><div data-isTrue="1">' + gameJson.errorword +
					'</div>';
			} else {
				dom = '<div data-istrue="1" class="option">' + gameJson.errorword + '</div><div data-isTrue="0">' + gameJson.rightword +
					'</div>';
			}
			$('.game-options').html(dom);
		}



		function game(gameNum) {
			renderGameDom(ListChildActive[gameNum]);
			renderOpionDom(ListChildActive[gameNum]);
		}



		function countDown() {
			count = setInterval(function () {
				gameTime--;
				$('.count-down>span.count-time').html(gameTime);
				if (gameTime <= 0) {
					clearInterval(count);
					addchallengenum(activeId,function(){})
					if ($(".game-options>div").eq(0).data('istrue')) {
						$(".game-options>div").eq(0).append('<div class="game-true"></div>')
						$(".game-options>div").eq(1).append('<div class="game-false"></div>')
					} else {
						$(".game-options>div").eq(1).append('<div class="game-true"></div>')
						$(".game-options>div").eq(0).append('<div class="game-false"></div>')
					}
					setTimeout(function () {
						$('.game-res').fadeIn();
					}, 500);
					isClick = false;
					$('.game-start').hide();
					$('.game-over').show();
					$('.game-span').html(gameNum + 1)
					if (countNum-1<=0){
						$('.share').show();
					}
				}
			}, 1000)
		}
		// 记录挑战结果
		function addchallengenum(activeid,fn) {
			ajax.returnRequest({
				params: {
					action: 'addchallengenum',
					wxopenid: getUserInfo().ResultData.wxopenid,
					activeid:activeid
				},
				callback: function (res) {
					console.log(res)
					if(res.ResultCode){
						alert(res.ResultMsg)
					}else{
						fn();
					}
				}
			})
		}
		ajax.request({
			params: {
				action: 'active',
				wxopenid: getUserInfo().ResultData.wxopenid
			},
			callback: function (res) {
				ListChildActive = res.ListChildActive;
				countNum = res.challengenum-res.challengednum;
				activeId = res.id;
				console.log(countNum)
				if(countNum<=0){
					$('.game-res').show();
					$('.share').show();
				}else{
					game(gameNum);
					$('.count-down>span.count-time').html(res.countdown)
					gameTime = initTime = res.countdown;
					countDown();
				}
			}
		})

		var isClick = true;
		$(".game-options").on("click", "div", function (event) {
			if (isClick) {
				isClick = false;
				clearInterval(count);
				var isTrue = $(this).data('istrue');
				// 未答完所有题
				if (!isTrue) {
					// 答题正确
					gameNum++;
					$(this).append('<div class="game-true"></div>')
					gameTime = initTime;
					$('.count-down>span.count-time').html(gameTime)
					setTimeout(function () {
						game(gameNum);
						countDown();
						var arr = ['一', '二', '三', '四', '五', ]
						$('.success-title').html('第' + arr[gameNum] + '题')
						isClick = true;
					}, 1500)
					if (gameNum == ListChildActive.length - 1) {
						// 答对所有题目
						addchallengenum(activeId,function(){})
						setTimeout(function () {
							localStorage.setItem('isGift', 0);
							location.href = 'success.html'
						}, 1000)
					}
				} else {
					// 答题错误
					$(this).append('<div class="game-false"></div>');
					$('.game-start').hide();
					$('.game-over').show();
					$('.game-span').html(gameNum+1)
					console.log(activeId)
					addchallengenum(activeId,function(){
						if ((countNum - 1) <= 0) {
							$('.share').show();
						}
						setTimeout(function () {
							$('.game-res').fadeIn();
						}, 500)
					})
				}
			}

		})
		$('.share').click(function () {
			$('.pop').fadeIn()
		})
		$('.pop').click(function () {
			$('.pop').fadeOut()
		})
		$('.continue').click(function () {
			location.href = 'index.html'
		})




		wxFunction(function () {
			wx.ready(function () {
				wx.onMenuShareTimeline({
					title: '拼字赢好礼', // 分享标题
					link: baseurl + 'index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: baseurl + 'image/index-banner.png', // 分享图标
					success: function () {
						changechallnum(activeId);
					}
				})
				wx.onMenuShareAppMessage({
					title: '拼字赢好礼', // 分享标题
					desc: '拼字赢好礼', // 分享描述
					link: baseurl + 'index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: baseurl + 'image/index-banner.png', // 分享图标
					success: function () {
						changechallnum(activeId);
					}
				});
			});
		})
	})
</script>

</html>